<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国新冠肺炎疫情数据可视化</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>

    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>


</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .button {

        display: inline-block;

        zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */

        *display: inline;

        vertical-align: baseline;

        margin: 0 2px;

        outline: none;

        cursor: pointer;

        text-align: center;

        text-decoration: none;

        font: 14px/100% Arial, Helvetica, sans-serif;

        padding: .5em 2em .55em;

        text-shadow: 0 1px 1px rgba(0,0,0,.3);

        -webkit-border-radius: .5em;

        -moz-border-radius: .5em;

        border-radius: .5em;

        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

        -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

        box-shadow: 0 1px 2px rgba(0,0,0,.2);

    }

    .button:hover {

        text-decoration: none;

    }

    .button:active {

        position: relative;

        top: 1px;

    }



    .bigrounded {

        -webkit-border-radius: 2em;

        -moz-border-radius: 2em;

        border-radius: 2em;

    }

    .medium {

        font-size: 12px;

        padding: .4em 1.5em .42em;

    }

    .small {

        font-size: 11px;

        padding: .2em 1em .275em;

    }
    .orange {

        color: #fef4e9;

        border: solid 1px #da7c0c;

        background: #f78d1d;

        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);

        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

    }

    .orange:hover {

        background: #f47c20;

        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));

        background: -moz-linear-gradient(top,  #f88e11,  #f06015);

        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');

    }

    .orange:active {

        color: #fcd3a5;

        background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));

        background: -moz-linear-gradient(top,  #f47a20,  #faa51a);

        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');

    }



    .green {

        color: #e8f0de;

        border: solid 1px #538312;

        background: #64991e;

        background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));

        background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);

        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');

    }

    .green:hover {

        background: #538018;

        background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));

        background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);

        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');

    }

    .green:active {

        color: #a9c08c;

        background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));

        background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);

        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');

    }
    table
    {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
    }
    table td, table th
    {
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }
    table thead th
    {
        background-color: #CCE8EB;
        width: 100px;
    }
    table tr:nth-child(odd)
    {
        background: #fff;
    }
    table tr:nth-child(even) {
        background: #F5FAFA;
    }
    #automa {
        position: absolute;
        height:200%;
        left:3px;
        right:3px;
        top:40px;
    }
    #info{
        position: center;
    }
    @font-face {
        font-family: "SourceHanSansCN-Light";
        {#src: url("{% static 'font/SourceHanSansCN-Light.otf' %}");#}
    }
    li{
        list-style-type:None;
        padding: 20px; /* 将默认的内边距去掉 */
        margin: 10px; /* 将默认的外边距去掉 */
        font-size: 25px;
        font-family: "SourceHanSansCN-Light", serif;
        display: inline-block;
    }
    #newAdd{color: red;}
    #heal{color:green;}
    #suspect{color: cornflowerblue;}
    #exist{color:rgb(236, 162, 24);}

</style>
<body>
{#<div id="left1">left 50</div>#}
{#<div id="right1">right 50</div>#}

<div id="info" >
    <ul>
        <button type="button" class="button orange" id="btn">累计确诊</button>
        <button type="button" class="button orange" id="btn">新增确诊</button>
        <button type="button" class="button orange" id="btn">当前确诊</button>
        <button type="button" class="button orange" id="btn">疑似感染</button>
        <button type="button" class="button orange" id="btn">累计死亡</button>
        <button type="button" class="button orange" id="btn">累计治愈</button>
        <button type="button" class="button orange" id="btn">死亡概率</button>
        <button type="button" class="button orange" id="btn">治愈概率</button>
{#        <li id="newAdd">新增 13</li>#}
{#        <li id="exist">现存 233</li>#}
{#        <li id="suspect">疑似 15</li>#}
{#        <li id="heal">治愈: 999</li>#}
    </ul>
</div>
<div id="automa">
    <div style="width:100%; height:55%;">
<div id="bing" style="width:30%; height:100%;float:left;">
    <div id="pie" style="width:100%; height:60%;float:left"></div>
    <div id="wcd" style="width:100%; height:40%;float:left"></div>
</div>
<div id="map" style="width:45%; height:100%;float:left"></div>
<div id="bar" style="width:25%; height:100%;float:right;"></div>
    </div>
    <div style="width:100%; height:25%;">
<div id="lin1" style="width:48%; height:100%;float:left;"></div>
<div id="lin2" style="width:48%; height:100%;float:right;"></div>
    </div>

<div id="app" style= "height:38%">
    <table width="90%"  class="table" v-cloak>
        <caption>
            <h2>
                中国今日数据报表
            </h2>
        </caption>
        <thead>
        <tr>
            <th>[[namepro]]</th>
            <th v-for="i in titrow">[[i]]</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="i in pro">
            <td> [[ i.name ]] </td>
            <td> [[ i.total_confirm ]] </td>
            <td> [[ i.today_confirm ]] </td>
            <td> [[ i.total_nowConfirm ]] </td>
            <td> [[ i.total_suspect ]] </td>
            <td> [[ i.total_dead ]] </td>
            <td> [[ i.total_heal ]] </td>
            <td> [[ i.total_deadRate ]] </td>
            <td> [[ i.total_healRate ]] </td>
        </tr>
        </tbody>
    </table>

</div>
</div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        // 修改Vue变量的读取语法，避免和django模板语法冲突
        delimiters: ['[[', ']]'],
        data: {
                hst:"http://127.0.0.1:8000/",
                pro: [],
                bepost:"area/",
                namepro: "中国省名",
                tosort: "累计确诊",
                titrow: ['累计确诊', '新增确诊', '当前确诊', '疑似感染',
                    '累计死亡', '累计治愈', '死亡概率', '治愈概率',],
                tableLabel: [
                {label: '省名称',prop:'name'},
                {label: '累计确诊', prop: 'total_confirm'},
                {label: '新增确诊', prop: 'today_confirm'},
                {label: '当前确诊', prop: 'total_nowConfirm'},
                {label: '疑似感染', prop: 'total_suspect'},
                {label: '累计死亡', prop: 'total_dead'},
                {label: '累计治愈', prop: 'total_heal'},
                {label: '死亡概率', prop: 'total_deadRate'},
                {label: '治愈概率', prop: 'total_healRate'},
            ]
        },

        methods: {
            fpro:function () {
            axios.post(this.hst+"province/",{})
                .then(function (response) {
                    console.log(response);
                    console.log(response.data);
                    let a = response.data.pro;
                    this.pro = [];
                    for(let i=0;i<a.length;i++){
                        Vue.set( vm.pro, i, a[i]);
                    }

                    {#this.pro = JSON.parse(JSON.stringify(response.data.pro));#}
                    {#alert(this.pro.name);#}
                    {#console.log(this.pro.name);#}
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
        },
        mounted() {
            this.fpro();
        },
    })

</script>
<script>
    var mp = echarts.init(document.getElementById('map'), 'white', {renderer: 'canvas'});
    var ba = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
    var pi = echarts.init(document.getElementById('pie'), 'white', {renderer: 'canvas'});
    var wc = echarts.init(document.getElementById('wcd'), 'white', {renderer: 'canvas'});
    var ln1 = echarts.init(document.getElementById('lin1'), 'white', {renderer: 'canvas'});
    var ln2 = echarts.init(document.getElementById('lin2'), 'white', {renderer: 'canvas'});
    var contry = "china";
    var ptname = "中国";
    var usebase = "累计确诊";
    var gettit = {
        "新增确诊" : "today_confirm",
        "累计确诊" : "total_confirm",
        "当前确诊" : "total_nowConfirm",
        "疑似感染" : "total_suspect",
        "累计死亡" : "total_dead",
        "累计治愈" : "total_heal",
        "死亡概率" : "total_deadRate",
        "治愈概率" : "total_healRate",
        default : "total_confirm",
    }

    function mapdata() {
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:8000/map/",
            data: JSON.stringify({
                "contry" : contry,
                "ptname" : ptname,
                "usebase" : usebase,
                "title" : gettit[usebase],
            }),
            dataType: 'json',
            success: function (result) {
                console.log(result);
                mp.setOption(JSON.parse(result.data.mp));
                ba.setOption(JSON.parse(result.data.ba));
                pi.setOption(JSON.parse(result.data.pi));
                wc.setOption(JSON.parse(result.data.wc));
                {#alert(1);#}
            }
        });
        {#$.ajax({#}
        {#    type: "GET",#}
        {#    url: "http://127.0.0.1:8000/map",#}
        {#    dataType: 'json',#}
        {#    success: function (result) {#}
        {#        console.log(typeof(result.data),result.data);#}
        {#        a = JSON.parse(result.data);#}
        {#        mp.setOption(a);#}
        {#    }#}
        {# });#}
    }
    function linedata() {
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:8000/history/",
            data: JSON.stringify({
                "contry" : contry,
                "usebase" : usebase,
                "title" : gettit[usebase],
            }),
            dataType: 'json',
            success: function (result) {
                ln1.setOption(JSON.parse(result.data.ln1));
                ln2.setOption(JSON.parse(result.data.ln2));
                {#alert(1);#}
            }
        });
    }
    $(
        function () {
            mapdata();
            linedata();
        }
    );
    $('button').one("click", function() {

        usebase = $(this).html();
        $("#btn").attr("disabled", true);
        mapdata();
        $("#btn").attr("disabled", false);

    });
</script>